<script setup>
import { showToast, showLoadingToast } from "@/utils/vant-ui";
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { userRegisterService } from "@/api/user";
const username = ref("");
const password = ref("");
const rePassword = ref("");
const router = useRouter();
// 判断用户名和密码是否都不为空，用于注册键的显示和隐藏
const isFormValid = computed(() => {
  return (
    username.value.trim() !== "" &&
    password.value.trim() !== "" &&
    rePassword.value.trim() !== ""
  );
});
const onClickLeft = () => {
  router.go(-1);
};
// 注册成功后的操作
const onSubmit = (values) => {
  // console.log("submit", values);
  userRegisterService({
    username: values.username,
    password: values.password,
  }).then((res) => {
    console.log(res);
    showLoadingToast({
      message: "加载中...",
      forbidClick: true,
      overlay: true,
      onClose: () => {
        // 关闭 Toast 后，重置表单数据
        username.value = "";
        password.value = "";
        rePassword.value = "";
        showToast("注册成功,请登录");
        router.push("/login");
      },
    });
  });
};
// 跳转到登录页
const onClickLogin = () => {
  router.push("/login");
};
</script>
<template>
  <div class="login">
    <!-- 头部 -->
    <div class="header">
      <van-nav-bar
        title="注册"
        left-arrow
        text-light
        right-text="帮助"
        @click-right="onClickRight"
        @click-left="onClickLeft"
      />
    </div>
    <div class="container">
      <div class="title">
        <h3>用户注册</h3>
      </div>
      <van-form @submit="onSubmit" class="form">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="username"
            placeholder="用户名"
            clearable
            :rules="[
              { required: true, message: '请填写用户名', trigger: 'submit' },
              {
                validator: (value) =>
                  value.trim().length >= 2 && value.trim().length <= 8,
                message: '用户名长度需为2-8个字符',
                trigger: 'submit',
              },
            ]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            placeholder="密码"
            :rules="[
              { required: true, message: '请填写密码', trigger: 'sumbit' },
              {
                validator: (value) =>
                  value.trim().length >= 6 && value.trim().length <= 15,
                message: '密码长度需为6-15个字符',
                trigger: 'submit',
              },
            ]"
          >
          </van-field>
          <!-- 重复密码 -->
          <van-field
            v-model="rePassword"
            type="password"
            name="rePassword"
            placeholder="请再次填写密码"
            :rules="[
              { required: true, message: '请再次填写密码', trigger: 'submit' },
              {
                validator: (value) => value === password,
                message: '两次密码不一致',
                trigger: 'submit',
              },
            ]"
          >
          </van-field>
        </van-cell-group>
        <div class="footer">
          <label class="login" @click.prevent="onClickLogin()">
            <a href="">返回登录</a>
          </label>
        </div>
        <!-- 左右两边添加切换到注册，和忘记密码 -->
        <div style="margin: 16px">
          <van-button
            round
            block
            native-type="submit"
            class="submit-btn"
            :disabled="!isFormValid"
          >
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<style lang="less" scoped>
// .header {
//   .van-nav-bar {
//   }
// }
.container {
  padding: 30px;
  .title {
    margin-left: 16px;
    margin-top: 40px;
    margin-bottom: 20px;
    h3 {
      color: rgb(31, 30, 37);
      font-size: 24px;
      font-weight: 5000;
    }
  }
  .form {
    .van-cell-group--inset {
      margin: 0;
    }
    .van-field {
      width: 100%;
      margin-bottom: 20px;
      margin-left: 0;
      border-radius: 8px;
      background-color: rgb(249, 249, 249);
    }
    .submit-btn {
      margin-top: 20px;
      width: 100%;
      border: 0;
      border-radius: 8px;
      background-color: red;
    }
    .footer {
      display: flex;
      justify-content: flex-end;
      padding: 0 16px;
      .login {
        a {
          color: rgb(254, 116, 142);
        }
      }
    }
  }
}
</style>
